<template>
  <div id="header">
      <ul class="nav">
          <li><router-link :to="{name:'首页'}">首页</router-link></li>
          <li><router-link :to="{name:'列表页'}">学生列表</router-link></li>
          <li class="right" v-show="is_login.is_login == false"><router-link to="/login">登录</router-link></li>
          <li class="right" v-show="is_login.is_login"><a href="">欢迎：{{userName}}</a></li>
          <li class="right" v-show="is_login.is_login"><a @click="signout" href="">退出登录</a></li>
      </ul>
  </div>
</template>

<script>
import store from '../store.js'
export default {
    data:function(){
        return {
            is_login:store.state,
            userName:localStorage.getItem('user')
        }
    },
    methods:{
        signout(e){
            e.preventDefault();
            store.setLogin(false);
            localStorage.setItem('user','')
        }
    },
    watch:{
        '$router.path'(val){
            this.userName = localStorage.getItem('user')
            console.log(val)
        }
    }
}
</script>

<style scoped>
    #header{
        width:100%;
        height:40px;
        background-color: #000;
    }
    .nav{
        width: 1200px;
        height:40px;
        margin:0 auto;
        overflow: hidden;
    }
    .nav li{
        height:40px;
        padding:0 20px;
        float:left;
        list-style: none;
    }
    .nav .right{
        float:right;
    }
    .nav a{
        line-height: 40px;
        color:#fff;
        text-decoration:none;
    }
</style>